<div class="body">
  <div class="left">
    <div>
      <el-button type="primary" class="btn" @click="onPlayWithComputer()">人机对弈</el-button>
      <el-button type="primary" class="btn" @click="onStartOnline()">双人对战</el-button>
      <el-button type="primary" class="btn" @click="onRegret()">悔棋</el-button>
    </div>
    <div class="online-msg">
      <div id="tips">{{msgShow}}</div>
      <div>
        <el-input v-model="msgSend" placeholder="请输入聊天内容" clearable>
          <el-button slot="append" @click="onSendMsg()">发送</el-button>
        </el-input>
        <div>
          <textarea v-html="talkArea" class="form-control" id="talkArea" cols="30" rows="10" disabled
            placeholder="聊天记录">
          </textarea>
          <div v-html="talkArea"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="containers">
    <div id="chessboard" @click="onSelectChess($event)">
      <img class="chess" v-for="(attr, id) in chessList"
        :style="{display:attr.display,top:distanceX(attr.x) ,left:distanceY(attr.y)}" :src="attr.src" :id="id"
        :key="id">
      <img class="box" v-for="(attr, id) in boxList"
        :style="{display:attr.display,top:distanceX(attr.x),left:distanceY(attr.y)}" :src="attr.src" :id="id" :key="id">
    </div>
  </div>
</div>